<template>
	<div class="statistics-region">
		<template v-if="Math.floor(+route.query.type) === 31">
			<van-tabs v-model:active="tabState.active" animated sticky swipeable>
				<van-tab v-for="item in tabState.list" :title="item.title" :name="item.value" :key="item.value">
				</van-tab>
			</van-tabs>
		</template>
		<h4 v-else>{{ titleEnum[+route.query.type] }}</h4>

		<div class="table">
			<div class="item title">
				<p v-for="item in tableData.column" :key="item">
					{{ item }}
				</p>
			</div>
			<component
				:is="empty"
				v-if="!tableData.list?.length && !tableData.loading"
			/>
			<div class="item-wrap">
				<div
					class="item"
					v-for="(item, index) in tableData.list"
					:key="index"
				>
					<p>{{ index + 1 }}</p>
					<p>{{ item.hzxm }}</p>
					<p>{{ item.address }}</p>
					<p>{{ item.fwbh }}</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { reactive, watch } from 'vue'
import {
	housescj_dbData,
	housescjjc_dbData,
	housesjzhc_dbData,
	housesqjhc_dbData,
	housessjhc_dbData,
	wzcfwdetail,
	wzcfwdetail_check
} from '@/service/village'
import empty from '@/components/empty'

import { useRouter, useRoute } from 'vue-router'

const route = useRoute()
const router = useRouter()

const titleEnum = {
	15: '行政区域未自查数量统计',
	25: '行政区域未检查数量统计',
}

const tabState = reactive({
	active: 1,
	list: [
		{ title: '已达标房屋', value: 1 },
		{ title: '未达标房屋', value: 2 },
	]
})

const tableData = reactive({
	loading: false,
	column: [
		'序号',
		'房主姓名',
		'地址',
		'房屋编号',
	],
	list: []
})

const getData = async () => {
	try {
		tableData.list = []
		tableData.loading = true
		const params = {
			code: route.query.code,
			pageindex: 0,
			limit: 99999999,
			isdb: +tabState.active,
			date: JSON.parse(route.query.date)
		}
		const result =
			+route.query.type === 15 ? await wzcfwdetail(params)
				: +route.query.type === 25 ? await wzcfwdetail_check(params)
					: +route.query.type === 31.1 ? await housescj_dbData(params)
						: +route.query.type === 31.2 ? await housescjjc_dbData(params)
							: +route.query.type === 31.3 ? await housesjzhc_dbData(params)
								: +route.query.type === 31.4 ? await housesqjhc_dbData(params)
									: +route.query.type === 31.5 ? await housessjhc_dbData(params)						: {}
		tableData.list = result?.data?.items
	} catch (e) {
		//
	} finally {
		tableData.loading = false
	}
}

watch(() => tabState.active, () => {
	getData()
}, { immediate: true })

</script>

<style scoped lang="less">
.statistics-region {
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	h4 {
		line-height: 66px;
		height: 66px;
		font-size: 30px;
		font-weight: 600;
		color: #fff;
		text-indent: 24px;
		background-image: -webkit-linear-gradient(left, var(--van-primary-color) 0%, #fff 100%);
	}
	.table {
		flex: 1;
		padding: 24px;
		display: flex;
		flex-direction: column;
		overflow: auto;
		background: #fff;
	}
	.item-wrap {
		flex: 1;
		overflow: auto;
		-ms-overflow-style: none;
		scrollbar-width: none;
		&::-webkit-scrollbar {
			display: none;
		}
		.item:nth-of-type(1) {
			border-top: 0;
		}
	}
	.title {
		background: #fff;
		p {
			font-weight: 600;
		}
	}
	.item {
		display: flex;
		min-height: 40px;
		line-height: 40px;
		border: 1px solid var(--border-color);
		border-top: 0;
		box-sizing: border-box;
		&:nth-of-type(1) {
			border-top: 1px solid var(--border-color);
		}
		p {
			flex: 1;
			padding: 12px;
			border-left: 1px solid var(--border-color);
			&:nth-of-type(1) {
				flex: none;
				width: 80px;
				border-left: 0;
			}
			&:nth-of-type(2) {
				flex: none;
				width: 120px;
			}
			&:nth-of-type(4) {
				flex: none;
				width: 140px;
			}
		}
	}
}
</style>
